<template>
    <div class="me-page">
        <div class="use-box">
            <div class="use-img"><router-link to="/data"></router-link></div>
            <div class="use-text" v-show="!access">
                <span class="t">登录</span>
                <span class="x"></span>
                <span class="t">注册</span>
            </div>
            <div class="use-text1" v-show="access">
                啊噗噗
                <span>代金券 20张</span>
            </div>
            <router-link to="/set" class="set"></router-link>
        </div>
        <div class="use-cotant">
            <div class="cotant">
                <div class="img dingdan"></div>
                <div class="text">我的订单</div>
            </div>
            <div class="cotant">
                <div class="img map"></div>
                <div class="text">收货地址</div>
            </div>
            <div class="cotant">
                <div class="img tuijian"></div>
                <div class="text">推荐给好友</div>
            </div>
            <div class="cotant">
                <div class="img jiameng"></div>
                <div class="text">加盟方式</div>
                <router-link to="/join"></router-link>
            </div>
        </div>
        <div class="use-btn" v-show="access">退出</div>
    </div>
</template>



<script>

export default {
    data(){
        return{
            access:false
        }
    }
}
</script>

<style lang="less" rel="stylesheet/less">
.me-page{
    background:#f7f7f7;
    padding-bottom:1rem;
    .use-box{
        width:7.5rem;
        height:4.5rem;
        background:url('bg.png') no-repeat;
        background-size:100% 100%;
        position:relative;
        .use-img{
            width:1.46rem;
            height:1.46rem;
            background:url('use.png') no-repeat;
            background-size:100% 100%;
            position:absolute;
            left:50%;
            top:50%;
            margin:-1rem 0 0 -0.73rem;
            a{
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%
            }
            img{
                width:100%;
                height:100%;
                border-radius:50%;
            }
        }
        .use-text{
            display:flex;
            position:absolute;
            left:0;
            top:3.69rem;
            .t{
                display:inline-block;
                width:3.72rem;
                text-align:center;
                font-size: 0.34rem;
                color: #FFFFFF;
            }
            .x{
                width:0.06rem;
                height:0.42rem;
                display:inline-block;
                background:url('xian.png') no-repeat;
                background-size:100% 100%;
            }
        }
        .use-text1{
            position:relative;
            top:3.08rem;
            font-size: 0.34rem;
            color: #FFFFFF;
            text-align:center;
            span{
                display:block;
                font-size: 0.26rem;
                margin-top:0.2rem;
            }
        }
        .set{
            width:0.4rem;
            height:0.4rem;
            background:url('set.png') no-repeat;
            background-size:100% 100%;
            position:absolute;
            top:0.4rem;
            right:0.2rem;
        }
    }
    .use-cotant{
        width:7rem;
        margin:0 auto;
        display:flex;
        flex-wrap:wrap;
        .cotant{
            width:3.21rem;
            height:3.93rem;
            background: #FFFFFF;
            border-radius: 8px;
            margin:0.14rem;
            position:relative;
            a{
                width:100%;
                height:100%;
                position:absolute;
                top:0;
                left:0;
            }
            .img{
                width:1.1rem;
                height:1.1rem;
                margin:1.04rem auto 0;
                &.dingdan{
                    background:url('dingdan.png') no-repeat;
                    background-size:100% 100%
                }
                &.map{
                    background:url('map.png') no-repeat;
                    background-size:100% 100%
                }
                &.tuijian{
                    background:url('tuijian.png') no-repeat;
                    background-size:100% 100%
                }
                &.jiameng{
                    background:url('jiameng.png') no-repeat;
                    background-size:100% 100%
                }
            }
            .text{
                font-size: 0.28rem;
                color: #727272;
                text-align:center;
                margin-top:0.24rem;
            }
        }
    }
    .use-btn{
        width:6rem;
        height:1rem;
        text-align:center;
        line-height:1rem;
        margin:0.4rem auto;
        background: #00D397;
        box-shadow: 0px 2px 10px 0px rgba(255,255,255,0.63), 0px 9px 20px 0px rgba(0,211,151,0.49);
        font-size:0.34rem;
        color: #FFFFFF;
    }
}
</style>

